import React from 'react';
import './style/index.less';
import {Card, Icon, Avatar} from 'antd';
const { Meta } = Card;

export default class CardDemo extends React.Component {

  card1 = () => {
    return (

      <Card title="Card title" extra={<a href="#">More</a>} style={{width: 300}}>
        <p>Card content</p>
        <p>Card content</p>
        <p>Card content</p>
      </Card>
    );
  }

  card2 = () => {
    return (
      <Card
        hoverable
        style={{ width: 240 }}
        cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
      >
        <Meta
          title="Europe Street beat"
          description="www.instagram.com"
        />
      </Card>
    );
  }

  card3 = () => {
    return(
      <Card
        style={{ width: 300 }}
        cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
        actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
      >
        <Meta
          avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
          title="Card title"
          description="This is the description"
        />
      </Card>
    );
  }

  render() {
    return (
      <div className='card-demo'>
        {this.card1()}
        {this.card2()}
        {this.card3()}
      </div>
    );
  }
}
